<template>
  <el-card shadow="hover" class="demo-progress">
    <h4 style="text-align: center">直线进度条</h4>
    <el-divider/>
    <el-progress :percentage="50"/>
    <el-progress :percentage="100" :format="format"/>
    <el-progress :percentage="100" status="success"/>
    <el-progress :percentage="100" status="warning"/>
    <el-progress :percentage="50" status="exception"/>
  </el-card>
  <el-card class="demo-progress">
    <h4 style="text-align: center">百分比进度条</h4>
    <el-divider/>
    <el-progress :text-inside="true" :stroke-width="26" :percentage="70"/>
    <el-progress :text-inside="true" :stroke-width="24" :percentage="100" status="success"/>
    <el-progress :text-inside="true" :stroke-width="22" :percentage="80" status="warning"/>
    <el-progress :text-inside="true" :stroke-width="20" :percentage="50" status="exception"/>
  </el-card>
  <el-card class="demo-progress">
    <h4 style="text-align: center">自定义进度条</h4>
    <el-divider/>
    <el-progress :percentage="percentage" :color="customColor"/>
    <el-progress :percentage="percentage" :color="customColorMethod"/>
    <el-progress :percentage="percentage" :color="customColors"/>
    <el-progress :percentage="percentage" :color="customColors"/>
    <div>
      <el-button-group>
        <el-button :icon="Minus" @click="decrease"/>
        <el-button :icon="Plus" @click="increase"/>
      </el-button-group>
    </div>
  </el-card>

  <el-card class="demo-progress">
    <h4 style="text-align: center">仪表盘环形进度条</h4>
    <el-divider/>
    <el-progress type="dashboard" :percentage="percentage" :color="colors"/>
    <el-progress type="dashboard" :percentage="percentage2" :color="colors"/>
    <div>
      <el-button-group>
        <el-button :icon="Minus" @click="decrease"/>
        <el-button :icon="Plus" @click="increase"/>
      </el-button-group>
    </div>
  </el-card>
  <el-card class="demo-progress">
    <h4 style="text-align: center">动画进度条</h4>
    <el-divider/>
    <el-progress :percentage="50" :indeterminate="true"/>
    <el-progress :percentage="100" :format="format" :indeterminate="true"/>
    <el-progress :percentage="100" status="success" :indeterminate="true" :duration="5"/>
    <el-progress :percentage="100" status="warning" :indeterminate="true" :duration="1"/>
    <el-progress :percentage="50" status="exception" :indeterminate="true"/>
  </el-card>
  <el-card class="demo-progress">
    <h4 style="text-align: center">环形进度条</h4>
    <el-divider/>
    <el-progress type="circle" :percentage="0"/>
    <el-progress type="circle" :percentage="25"/>
    <el-progress type="circle" :percentage="100" status="success"/>
    <el-progress type="circle" :percentage="70" status="warning"/>
    <el-progress type="circle" :percentage="50" status="exception"/>
  </el-card>
</template>

<script setup>
import {onMounted, ref} from "vue";
import {Minus, Plus} from '@element-plus/icons-vue'

const format = (percentage) => (percentage === 100 ? 'Full' : `${percentage}%`)

const percentage = ref(20)
const percentage2 = ref(0)

const colors = [
  { color: '#f56c6c', percentage: 20 },
  { color: '#e6a23c', percentage: 40 },
  { color: '#5cb87a', percentage: 60 },
  { color: '#1989fa', percentage: 80 },
  { color: '#6f7ad3', percentage: 100 },
]

const customColor = ref('#409eff')
const customColors = [
  {color: '#f56c6c', percentage: 20},
  {color: '#e6a23c', percentage: 40},
  {color: '#5cb87a', percentage: 60},
  {color: '#1989fa', percentage: 80},
  {color: '#6f7ad3', percentage: 100}
]
const customColorMethod = (percentage) => {
  if (percentage < 30) {
    return '#909399'
  }
  if (percentage < 70) {
    return '#e6a23c'
  }
  return '#67c23a'
}
const increase = () => {
  percentage.value += 10
  if (percentage.value > 100) {
    percentage.value = 100
  }
}
const decrease = () => {
  percentage.value -= 10
  if (percentage.value < 0) {
    percentage.value = 0
  }
}

onMounted(() => {
  setInterval(() => {
    percentage2.value = (percentage2.value % 100) + 10
  }, 500)
})

</script>

<style lang="scss" scoped>
.demo-progress {
  width: 800px;
  margin: 15px;
  float: left;
}

.el-progress--line {
  margin-bottom: 15px;
}


</style>